import logo from './logo.svg';
import logo2 from './AntDesign.svg'
import './App.css'
import 'antd/dist/antd.css'
import { Input } from 'antd';
import { Row,Col } from 'antd'
import { Menu } from 'antd';
import { Button } from 'antd';

function App() {
  return (
    <div className="ant-col">
      <Row align="middle">
        <Col>
          <h1>
            <a id="logo" href="https://ant.design/index-cn">
              <img src={logo} alt="logo" /> 
              "Ant Design"
            </a>
          </h1>
        </Col>

        <Col span={4}>
          <div>
            <Input placeholder="Basic usage" />
          </div>
        </Col>

        <Col span={10} style={{marginRight:"0"}}>
          <Menu mode="horizontal">
            <Menu.Item key="1">
              设计
            </Menu.Item>
            <Menu.Item key="2">
              文档
            </Menu.Item>
            <Menu.Item key="3">
              组件
            </Menu.Item>
            <Menu.Item key="4">
              资源
            </Menu.Item>
            <Menu.Item key="5">
              国内镜像
            </Menu.Item>
          </Menu>
        </Col>

    </Row>
    
    <div className='home-banner-holder'>
      <div className='home-banner-content'>
        <div className='home-card-logo'>
          <img src={logo2} alt="Ant Design" style={{width:'500px',height:'87px'}} className='home-banner-normal'/> 
        </div>
        <p>企业级产品设计体系，创造高效愉悦的工作体验</p>
        <div className='home-banner-content-operations'>
          <Button type="primary" shape="round" size={'large'} style={{marginRight:'10px'}}>开始使用</Button>
          <Button shape="round" size={'large'} style={{marginLfet:'10px'}}>设计语言</Button>
        </div>
      </div>
    </div>

  </div>
  );
}

export default App;
